<template>
  <el-aside width="200px">
    <el-menu active-text-color="#409EFF" router :default-active="activePath" class="el-menu-vertical">

      <el-sub-menu index="fund-research" v-if="hasRole(featureRoles.NAV_FUND_RESEARCH)">
        <template #title>
          <el-icon>
            <DataAnalysis />
          </el-icon>
          <span>基金研究</span>
        </template>

        <el-menu-item index="/funds">基金列表</el-menu-item>
        <el-menu-item index="/companies">基金公司</el-menu-item>
        <el-menu-item index="/managers">基金经理</el-menu-item>
        <el-menu-item index="/portfolios">我的组合</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/factors" v-if="hasRole(featureRoles.NAV_FACTOR_MANAGEMENT)">
        <template #title>
          <el-icon>
            <Grid />
          </el-icon>
          <span>因子管理</span>
        </template>

        <el-menu-item index="/home">因子系统控制台</el-menu-item>
        <el-menu-item index="/data-source">数据源接入</el-menu-item>
        <el-menu-item index="/factor">因子数据管理</el-menu-item>
        <el-menu-item index="/derived-factor">衍生因子管理</el-menu-item>
        <el-menu-item index="/style-factor">风格因子管理</el-menu-item>
        <el-menu-item index="/factor-tree">因子树管理</el-menu-item>
      </el-sub-menu>


      <el-sub-menu index="/strategies" v-if="hasRole(featureRoles.NAV_STRATEGY_MANAGEMENT)">
        <template #title>
          <el-icon>
            <TrendCharts />
          </el-icon>
          <span>策略管理</span>
        </template>

        <el-menu-item index="/strategies">策略列表</el-menu-item>
        <el-menu-item index="/strategies/approval">策略审核</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="combination" v-if="hasRole(featureRoles.NAV_COMBINATION_MANAGEMENT)">
        <template #title>
          <el-icon>
            <Wallet />
          </el-icon>
          <span>组合产品管理</span>
        </template>

        <el-menu-item index="/combinations">组合列表</el-menu-item>
        <el-menu-item index="/combinations/approval">组合审核</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="trades" v-if="hasRole(featureRoles.NAV_TRADE_MANAGEMENT)">
        <template #title>
          <el-icon>
            <Tickets />
          </el-icon>
          <span>交易管理</span>
        </template>
        <el-menu-item index="/trades">订单列表</el-menu-item>
        <el-menu-item index="/trades/approval">交易审批</el-menu-item>
        <el-menu-item index="/settlements">交割单查询</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="user-management" v-if="hasRole(featureRoles.NAV_USER_MANAGEMENT)">
        <template #title>
          <el-icon>
            <Setting />
          </el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/users">用户列表</el-menu-item>
      </el-sub-menu>

    </el-menu>
  </el-aside>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import {
  Setting,
  Tickets,
  DataAnalysis,
  Grid,
  TrendCharts,
  Wallet
} from '@element-plus/icons-vue';
import { featureRoles } from '@/config/permissions';
import { useAuthStore } from '../store/auth';

const route = useRoute();
const activePath = computed(() => route.path);

const authStore = useAuthStore();
const hasRole = authStore.hasRole;
</script>

<style scoped>
.el-aside {
  background-color: #ffffff;
  border-right: 1px solid #e6e6e6;
}

.el-menu-vertical {
  height: 100%;
  border-right: none;
}
</style>